@import "../variables";

$default-color: #333333;
$color-font: #35ac63;

.switch-bar {
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000 !important;
    .switch-btn {
        font-size: computed-vw(54);
        color: $default-color;
        height: computed-vw(150);
        line-height: computed-vw(150);
        width: computed-vw(240);
        text-align: center;
        &_selected {
            color: $color-font;
            position: relative;
        }
        &:first-child {
            margin-right: computed-vw(110);
        }
    }
    .switch-sign {
        position: absolute;
        width: computed-vw(220);
        height: computed-vw(7);
        bottom: computed-vw(-3.5);
        left: 0;
        margin-left: computed-vw(257);
        background-color: $color-font;
        transition: all .2s linear;
        z-index:2000;
    }
    .sign-change {
        transition: all .2s linear;
        margin-left: computed-vw(607);
    }
}
.title-bar {
    width: 100%;
    padding: 0 computed-vw(30);
    height: computed-vw(180);
    background-color: #fff;
    color: #333;
    font-size: computed-vw(42);
    font-weight: bold;
    text-align: center;
    left: 0;
    align-items: center;
    z-index: 19;
    border-top: computed-vw(1) solid #e4e5e6;
    .col {
        padding: 0;
    }
    .col:nth-of-type(1) {
        flex: 0 0 computed-vw(197);
    }
    .col:nth-of-type(2) {
        flex: 0 0 computed-vw(201);
        padding: 0 computed-vw(50);
    }
    .col:nth-of-type(3) {
        flex: 0 0 computed-vw(95);
    }
    .col:nth-of-type(4) {
        flex: 0 0 computed-vw(197);
        padding: 0 computed-vw(50);
    }
    .col:nth-of-type(5) {
        flex: 0 0 computed-vw(197);
        padding: 0 computed-vw(50);
    }
    .col:nth-of-type(6) {
        flex: 0 0 computed-vw(126);
    }
}
.title-bar2 {
    width: 100%;
    padding: 0 computed-vw(30);
    height: computed-vw(180);
    background-color: #ffffff;
    color: #333;
    font-size: computed-vw(42);
    font-weight: bold;
    text-align: center;
    left: 0;
    align-items: center;
    z-index: 19;
    border-top: computed-vw(1) solid #e4e5e6;
    .col:nth-of-type(1) {
        flex: 0 0 computed-vw(197);
    }
    .col:nth-of-type(2) {
        flex: 0 0 computed-vw(223);
        padding: 0 computed-vw(60);
    }
    .col:nth-of-type(3) {
        flex: 0 0 computed-vw(219);
        padding: 0 computed-vw(60);
    }
    .col:nth-of-type(4) {
        flex: 0 0 computed-vw(226);
        padding: 0 computed-vw(60);
    }
    .col:nth-of-type(5) {
        flex: 0 0 computed-vw(148);
    }
}

.card {
    background-color: #fff;
    border-radius: computed-vw(10);
    text-align: center;
    margin-bottom: computed-vw(30);
    overflow: hidden;
    position: absolute;
    left: computed-vw(30);
    right: computed-vw(30);
    &:after {
        content: " ";
        position: absolute;
        height: 100%;
        border-right: 1px solid #eaeaea;
        top: 0;
        right: computed-vw(126);
    }
    .one-child {
        height: computed-vw(300);
    }
    .double-child {
        height: computed-vw(326);
    }
    &-hd {
        width: computed-vw(197);
        flex: 0 0 computed-vw(197);
        padding: computed-vw(20) 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        background-color: $forgiveColor;
        div {
            margin-top: computed-vw(12);
            margin-bottom: computed-vw(12);
            i {
                width: computed-vw(40);
                height: computed-vw(40);
                margin-right: computed-vw(6);
                background-image: url("../assets/images/activity/roster-list/unkonw.png");
                background-size: 100% 100%;
            }
        }
        .client-name {
            text-align: center;
            width: 100%;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            font-size: computed-vw(42);
            span {
                width: 100%;
                word-break: break-all;
            }
        }
        .male {
            background-image: url("../assets/images/activity/roster-list/man.png");
            background-size: 100% 100%;
        }
        .female {
            background-image: url("../assets/images/activity/roster-list/woman.png");
            background-size: 100% 100%;
        }
        .age {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: computed-vw(36);
            color: #fff;
            min-height: computed-vw(40);
            width: 100%;
            flex: 0 0 auto;
            span {
                vertical-align: middle;
            }
        }
    }
    &-bd {
        padding: 0;
        overflow: hidden;
        align-self: center;
        color: $default-color;
        font-size: computed-vw(42);
        flex: 0 0 computed-vw(690);
        .col {
            padding: 0;
        }
        .over-time {
            .name {
                color: #999999;
            }
            .level {
                color: #999999;
            }
            .time {
                color: #999999;
            }
        }
        .name {
            flex: 0 0 computed-vw(201);
        }
        .level {
            flex: 0 0 computed-vw(95);
        }
        .time {
            flex: 0 0 computed-vw(197);
            align-self: center;
        }
        .track {
            color: #3dab4a;
            flex: 0 0 computed-vw(197);
            display: flex;
            align-items: center;
            justify-content: center;
            div {
                flex: 0 0 computed-vw(140);
            }
            i {
                width: computed-vw(32);
                height: computed-vw(32);
                background-image: url("../assets/images/activity/roster-list/arrow-d.png");
                background-size: 100% 100%;
            }
        }
        .empty-value {
            display: inline-block;
            height: computed-vw(2);
            background-color: #323333;
            width: computed-vw(36);
            vertical-align: middle;
        }
        .row {
            align-items: center;
            height: computed-vw(163);
            &:not(:last-of-type) {
                border-bottom: computed-vw(1) solid #eaeaea;
            }
        }
    }
    &-bd2 {
        .row {
            .col {
                padding: 0;
            }
            .name {
                flex: 0 0 computed-vw(223);
            }
            .time {
                flex: 0 0 computed-vw(219);
            }
            .track {
                flex: 0 0 computed-vw(226);
                div {
                    flex: 0 0 computed-vw(140);
                }
            }
        }
    }
    &-ft {
        width: computed-vw(126);
        align-self: center;
        .phone-wrapper {
            width: computed-vw(72);
            height: computed-vw(72);
            text-align: center;
            background-color: #35ac63;
            border-radius: computed-vw(36);
            margin: 0 auto;
        }
        .phone {
            display: inline-block;
            width: computed-vw(45);
            height: computed-vw(45);
            margin-top: computed-vw(13.5);
            background-image: url("../assets/images/activity/roster-list/phone.png");
            background-size: 100% 100%;
            margin-right: 0;
        }
    }
}

